<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../css/mui.min.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1190625_m3wxzcfcc89.css">
    <link rel="stylesheet" href="../../css/hui.css">
    <link rel="stylesheet" href="../../css/common.css">
    <title>登录</title>
    <style>
        html,body{
            background-color: #fff;
        }
        .title{
            padding-left: .39rem;
            line-height: .3rem;
            margin-top: .1rem;
            font-size: .2rem;
            color: #333;
            font-weight: bold;
        }
        .box{
            margin-top: .51rem;
        }
        .login-form{
            width: 2.95rem;
            height: .48rem;
            font-size: .16rem;
            overflow: hidden;
            margin: 0 auto;
            border-bottom: 1px solid #eee;
            line-height: .48rem;
            position: relative;
        }
        .login-form input{
            font-size: .14rem;
            color: #333;
        }
        .login-form span{
            position: absolute;
            font-size: .14rem;
        }
        .top span{
             left: 0;
             color: #999999;
        }
        .bottom span{
            right: 0;
            color: #9C53F6;
        }
        .top input{
            width: 100%;
            padding-left: .44rem;
        }
        .bottom input{
            padding-right: .88rem;
        }
        .login-form input::-moz-placeholder{color:#999999;}              
        .login-form input::-webkit-input-placeholder{color:#999999;}     
        .login-form input:-ms-input-placeholder{color:#999999;}
        .btn_login{
            width: 2.95rem;
            height: .4rem;
            text-align: center;
            line-height: .4rem;
            border-radius: .2rem;
            font-size: .16rem;
            font-weight: bold;
            color: #fff;
            margin: .81rem auto 0;
            background:#9C53F6;
            box-shadow:0px .03rem .04rem 0px rgba(222,196,255,1);
        } 
    </style>
</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title"></h1>
    </header>
    <div class="main">
        <div class="title">
            欢迎,</br>登录配骑
        </div>
        <div class="box">
            <div class="login-form top">
                 <span>+86</span>
                 <input type="tel" class="phone" placeholder="请输入手机号">
             </div>
            <div class="login-form bottom">
                <input type="number" class="code" placeholder="请输入验证码">
                <span class="get_code">获取验证码</span>
            </div>
            <div class="btn_login">立即登录</div>
        </div>
    </div>
</body>
<script src="../../js/jquery-3.3.1.min.js"></script>
<script src="../../js/hui.js"></script>
<script src="../../js/common.js"></script>
<script>
    $(document).ready(function(){
        //获取验证码
        $('.get_code').click(function(){
            var phone = $('.phone').val();
            if (!phone) {
                hui.toast('请输入正确手机号')
                return false
            }
            if ($(this).html() != '获取验证码') {
                return false
            }
            startTime()
            ajax('/api/user/get_code',{phone:phone},function(ret){
                if (ret) {
                    hui.toast(ret.msg)
                    if (ret.code == 1) {
                       
                    }
                }
            })
        })
        $('.btn_login').click(function(){
            var phone = $('.phone').val();
            var code = $('.code').val();
            if (!phone) {
                api.toast('请输入正确手机号')
                return false
            }
            if (!code) {
                api.toast('请输入验证码')
                return false
            }
            hui.loading('登录中')
            ajax('/api/user/login_sms',{phone:phone,code:code},function(ret){
                hui.closeLoading()
                if(ret){
                    hui.toast(ret.msg)
                    if (ret.code == 1) {
                        localStorage.setItem('uid',ret.uid)
                        setTimeout(() => {
                            history.go(-1)
                        }, 700);
                    }else{
                        //api.toast({msg:'网络似乎不太好，请重试'})
                    }
                }
            })
        })
        // 倒计时
        function startTime(){
            var t = 60;
            var timer = setInterval(function(){
                if (t<2) {
                    clearInterval(timer);
                    $('.get_code').html('获取验证码');
                } else {
                    t--;
                    $('.get_code').html(t+'s后重发');
                }
            },1000)
        }
    })


</script>
</html>